<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />
    <link rel="stylesheet" type="text/css" href="css/flutter.css"/>
    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>

    <link rel="stylesheet" href="https://unpkg.com/muse-ui/dist/muse-ui.css">
    <script src="https://unpkg.com/muse-ui/dist/muse-ui.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css">
    <title></title>
    <style type="text/css">
        #div1 {
            height: 180px;
            width: auto;
            background-image: url(img/图片1.jpg);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            opacity: 0.7; //透明度设置
        position: absolute;
            z-index: 1;
        }
        .div10{
            width: 5%;
            height: 80px;
            position: relative;
            float: left;

        }
        #div11{
            width: 25%;
            height: 80px;
            position: relative;
            float: left;
            margin-top: 30px;

        }
        #tx{
            height: 70px;
            width: 70px;
            background-image: url(img/2副本.jpg);
            /*背景是否重复*/
            background-repeat: no-repeat;
            /*背景大小:宽和高*/
            background-size:100% 100%;
            border-radius:35px;
            margin: 5px 0px;
            border: #ffffff solid 1px;
        }
        #div12{
            width: 40%;
            height: 80px;
            position: relative;
            float: left;
            margin-top: 30px;
        }
        #span1{
            color: #ffffff;
            font-size: 18px;
            font-weight: bold;		/*加粗*/
        }
        #span2{
            margin: 20px auto;

        }
        #div13{
            width: 25%;
            height: 80px;
            position: relative;
            float: left;
            margin-top: 30px;

        }
        #bj{
            margin-top: 25px;
            width: 100%;
            height: 30px;

            border-radius:35px;
            border: #ffffff solid 1px;
        }
        .sp1{
            size: 19px;
        }
        .sp2{
            text-align: center;
            color: #BDBEC2;
            font-size: 14px;
            line-height: 30px;
        }

        #div2 {
            width: auto;
            height: 100px;
            background-color: #8ABDFE;
            margin-left: 15px;
            margin-right:15px;
            border-radius:10px;
            margin-top: -20px;
            box-shadow: 0px 5px 5px rgba(0,0,0,0.4)/*阴影出现在元素下方*/;
            position: relative;
            top: -25px;

        }
        .di1 {
            width: 30%;
            float: left;
            text-align: center;
            position: relative;
            top: 30%;
            left: 5%;


        }
        #don{
            position: sticky;
            top: 0px;
        }
        .van-tabs__line {
            background-color: blue;
        }
        .mu-bottom-item-active {

            color: red;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 顶部导航 -->
    <van-nav-bar id="don" title="我的主页" left-text="返回" left-arrow >
        <template #right>
            <van-icon name="setting-o" size="18" />
        </template>
    </van-nav-bar>
    <div id="div1">

        <div class="div10">

        </div>
        <div id="div11">
            <!--头像1-->
            <p id="tx">

            </p>
        </div>
        <div id="div12">
            <p>
                <span id="span1">名称</span><br>

                <span class="sp2" id="span2">这个很累，不玩了</span>
            </p>

        </div>
        <div id="div13">
            <p id="bj" class="sp2">编辑资料</p>
        </div>
        <div class="div10">

        </div>

    </div>

    <div id="div2">
        <div class="di1">
            <span class="sp1">1</span><br>
            <span class="sp2">关注<span>
        </div>
        <div class="di1">
            <span class="sp1">1</span><br>
            <span class="sp2">人气<span>
        </div>
        <div class="di1">
            <span class="sp1">2.3w</span><br>
            <span class="sp2">粉丝<span>
        </div>
    </div>

    <van-tabs v-model:active="active" animated title-active-color="blue">

        <van-tab v-for="index in 1" :title="'作品 ' + index" name="ll">
            <mu-container v-for="index in 4" style="margin-bottom: 20px;">
                <mu-card style="width: 100%; max-width: 375px; margin: 0 auto; background-color: #F1F3F4;">
                    <mu-card-header title="Myron Avatar" sub-title="sub title">
                        <mu-avatar slot="avatar">
                            <img src="img/2%20-%20副本.jpg">
                        </mu-avatar>
                    </mu-card-header>
                    <mu-card-media title="Image Title" sub-title="Image Sub Title">
                        <img src="img/2%20-%20副本.jpg">
                    </mu-card-media>
                    <mu-card-title title="Content Title" sub-title="Content Title"></mu-card-title>
                    <mu-card-text>
                        散落在指尖的阳光，我试着轻轻抓住光影的踪迹，它却在眉宇间投下一片淡淡的阴影。
                        调皮的阳光掀动了四月的心帘，温暖如约的歌声渐起。

                    </mu-card-text>
                    <mu-container>
                        <mu-bottom-nav >
                            <mu-bottom-nav-item title="" icon="restore" ></mu-bottom-nav-item>
                            <mu-bottom-nav-item title="123" icon="favorite"></mu-bottom-nav-item>
                            <mu-bottom-nav-item title="" icon="backup"></mu-bottom-nav-item>
                        </mu-bottom-nav>
                    </mu-container>
                    <mu-card-actions>
                        <mu-button flat>删除</mu-button>
                        <mu-button flat>编辑</mu-button>
                    </mu-card-actions>
                </mu-card>
            </mu-container>
            <div id="" style="height: 100px;">
                <van-loading size="24px" style="text-align: center;">加载中...</van-loading>
            </div>
        </van-tab>
        <van-tab v-for="index in 1" :title="'喜欢 ' + index" name="l2">

            内容11 {{ index }}
        </van-tab>
    </van-tabs>




    <!-- 底部标签页 -->
    <van-tabbar v-model="active" inactive-color="#1989fa" active-color="#ee0a24" @change="onChange">
        <van-tabbar-item icon="home-o">主页</van-tabbar-item>
        <van-tabbar-item icon="smile-o" dot>树洞</van-tabbar-item>
        <van-tabbar-item icon="more-o" badge="5">消息</van-tabbar-item>
        <van-tabbar-item icon="friends-o">我的</van-tabbar-item>
    </van-tabbar>



</div>


<script>
    function goToPage(index) {
        let page = "index.html";
        switch (index) {
            case 0:
                page = "index.html";
                break;
            case 1:
                page = "shudong.html";
                break;
            case 2:
                page = "news.html";
                break;
            case 3:
                page = "my.html";
                break;
        }
        location.href = page;
    }
    let vm = new Vue({
        el: '#app',
        data: {
            active: 3,

        },
        methods: {
            onChange(index) {
                goToPage(index);
            },


        },
        mounted() {

        }
    });
</script>
</body>
</html>